<template>
	<div class="tips-input">
		<div class="tips-input__arrow"></div>
		<div class="tips-input__content">
			<div class="form-group">
				<div class="editable-input" style="position: relative;">
					<el-input v-model="input" placeholder="请输入内容"></el-input>
				</div>
				<div class="editable-buttons">
					<el-button type="success" icon="el-icon-check" circle @click.stop="editTextEvent"></el-button>
					<el-button type="danger" icon="el-icon-delete" circle @click.stop="deleteTextEvent"></el-button>
				</div>
			</div>

		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				input: ''
			}
		},
		methods:{
			editTextEvent(){
				this.$emit('editTextEvent',this.input)
			},
			deleteTextEvent(){
				this.input = '';
				this.$emit('deleteTextEvent',-1)
			}
		}
	}
</script>

<style lang="scss">
	@include component(tips-input) {
		position: absolute;
		top: rem(-70);
		left: rem(-30);
		z-index: 1060;
		display: block;
		width: rem(276);
		padding: rem(10);
		text-align: left;
		letter-spacing: normal;
		word-break: normal;
		word-spacing: normal;
		word-wrap: normal;
		white-space: normal;
		background-color: #fff;
		background-clip: padding-box;
		border: 1px solid rgba(0, 0, 0, .2);
		border-radius: 6px;
		box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
		line-break: auto;

		@include part(arrow) {
			position: absolute;
			display: block;
			width: 0;
			height: 0;
			border-color: transparent;
			border-style: solid;
			border-width: rem(11);
			bottom: rem(-11);
			left: 50%;
			margin-left: rem(-10);
			border-top-color: #999;
			border-top-color: rgba(0, 0, 0, .25);
			border-bottom-width: 0;

			&:after {
				position: absolute;
				display: block;
				width: 0;
				height: 0;
				border-color: transparent;
				border-style: solid;
				bottom: rem(-7);
				margin-left: rem(-10);
				content: " ";
				border-top-color: #fff;
				border-width: rem(11);

			}
		}

		@include part(content) {
			padding: rem(9) rem(14);

			.form-group {
				line-height: rem(20);
				margin-bottom: 0;
				white-space: nowrap;
				vertical-align: middle;
				@extend %flex-center;
			}

			.el-button.is-circle {
				padding: 5px;
				margin-left: 5px;
			}


		}
	}
</style>
